<template>
  <div>
    <div class="relative overflow-y-hidden shadow-md">
      <table
        class="w-full text-[14px] text-left rtl:text-right text-gray-500 dark:text-gray-400 border-spacing-0 border-collapse overflow-y-hidden"
        style="border:1px solid var(--grid);"
      >
        <!-- <div class="overflow-y-hidden w-[791px] bg-[#374151]"> -->
        <thead
          class="text-[12px] uppercase bg-[var(--theme-search-bg)] dark:bg-[#374151] dark:text-gray-400 text-[#9CA3AF]"
        >
        <tr>
          <th
            scope="col"
            class="w-[205.5px] h-[50px] leading-[26px] text-left px-4 py-3 box-border inline-block"
          >CAMERA ID</th>
          <th
            scope="col"
            class="w-[205.5px] h-[50px] leading-[26px] text-left px-4 py-3 box-border inline-block"
          >IP ADDRESS</th>
          <th
            scope="col"
            class="w-[88px] h-[50px] leading-[26px] text-left px-4 py-3 box-border inline-block"
          >PORT</th>
          <th
            scope="col"
            class="w-[144px] h-[50px] leading-[26px] text-left px-4 py-3 box-border inline-block"
          >Brand</th>
          <th
            scope="col"
            class="w-[144px] h-[50px] leading-[26px] text-left px-4 py-3 box-border inline-block"
          >Model</th>
        </tr>
        </thead>
        <!-- </div> -->
        <div class="h-[350px] overflow-y-auto" id="tbody">
          <tbody>
          <tr
            class="dark:bg-[var(--grid)] dark:border-[var(--grid)] hover:bg-[var(--grid)] dark:hover:bg-[var(--grid)]"
            style="border-bottom:1px solid var(--grid)"
            v-for="(item,index) in 9"
            :key="index"
          >
            <td
              scope="row"
              class="w-[205.5px] py-4 px-4 box-border inline-block text-left text-[14px] text-[var(--theme-font-color)] font-medium whitespace-nowrap dark:text-[var(--theme-font-color)]"
            >Camera 043</td>
            <td
              class="w-[205.5px] py-4 px-4 box-border inline-block text-left text-[14px] font-normal text-[#9CA3AF]"
            >192.503.182.41</td>
            <td
              class="w-[88px] py-4 px-4 box-border inline-block text-left text-[14px] font-normal text-[#9CA3AF]"
            >080</td>
            <td
              class="w-[144px] py-4 px-4 box-border inline-block text-left text-[14px] font-normal text-[#9CA3AF]"
            >Huawei</td>
            <td
              class="w-[144px] py-4 px-4 box-border inline-block text-left text-[14px] font-normal text-[#9CA3AF]"
            >XM-536</td>
          </tr>
          </tbody>
        </div>
      </table>
    </div>
    <div
      class="w-[793px] h-[67px] flex items-center justify-center mt-4"
    >
      <svg
        width="17"
        height="17"
        class=""
        viewBox="0 0 17 17"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clip-path="url(#clip0_1982_107067)">
          <path
            d="M8.5 0.5C6.91775 0.5 5.37103 0.969192 4.05544 1.84824C2.73985 2.72729 1.71447 3.97672 1.10897 5.43853C0.503466 6.90034 0.34504 8.50887 0.653721 10.0607C0.962403 11.6126 1.72433 13.038 2.84315 14.1569C3.96197 15.2757 5.38743 16.0376 6.93928 16.3463C8.49113 16.655 10.0997 16.4965 11.5615 15.891C13.0233 15.2855 14.2727 14.2602 15.1518 12.9446C16.0308 11.629 16.5 10.0822 16.5 8.5C16.4977 6.37898 15.6541 4.3455 14.1543 2.84572C12.6545 1.34593 10.621 0.502329 8.5 0.5ZM8.1 3.7C8.33734 3.7 8.56935 3.77038 8.76669 3.90224C8.96402 4.03409 9.11783 4.22151 9.20866 4.44078C9.29948 4.66005 9.32325 4.90133 9.27694 5.13411C9.23064 5.36688 9.11635 5.5807 8.94853 5.74853C8.78071 5.91635 8.56689 6.03064 8.33411 6.07694C8.10133 6.12324 7.86005 6.09948 7.64078 6.00865C7.42151 5.91783 7.2341 5.76402 7.10224 5.56668C6.97038 5.36934 6.9 5.13734 6.9 4.9C6.9 4.58174 7.02643 4.27651 7.25147 4.05147C7.47652 3.82643 7.78174 3.7 8.1 3.7ZM10.1 12.5H6.9C6.68783 12.5 6.48435 12.4157 6.33432 12.2657C6.18429 12.1157 6.1 11.9122 6.1 11.7C6.1 11.4878 6.18429 11.2843 6.33432 11.1343C6.48435 10.9843 6.68783 10.9 6.9 10.9H7.7V8.5H6.9C6.68783 8.5 6.48435 8.41571 6.33432 8.26568C6.18429 8.11565 6.1 7.91217 6.1 7.7C6.1 7.48782 6.18429 7.28434 6.33432 7.13431C6.48435 6.98428 6.68783 6.9 6.9 6.9H8.5C8.71218 6.9 8.91566 6.98428 9.06569 7.13431C9.21572 7.28434 9.3 7.48782 9.3 7.7V10.9H10.1C10.3122 10.9 10.5157 10.9843 10.6657 11.1343C10.8157 11.2843 10.9 11.4878 10.9 11.7C10.9 11.9122 10.8157 12.1157 10.6657 12.2657C10.5157 12.4157 10.3122 12.5 10.1 12.5Z"
            fill="#6B7280"
          />
        </g>
        <defs>
          <clipPath id="clip0_1982_107067">
            <rect width="16" height="16" fill="white" transform="translate(0.5 0.5)" />
          </clipPath>
        </defs>
      </svg>

      <div
        class="w-[530px] text-[14px] font-medium text-[#9CA3AF] ml-2"
      >These cameras already exist in your collection so they can't be added again.</div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "Table"
});
</script>
<style lang="scss" scoped>
#modal {
  :deep(.max-w-md) {
    width: 400px !important;
    height: 526px !important;
  }
  :deep(.bg-white) {
    border: 1px solid var(--grid);
    background-color: var(--theme) !important;
  }
  :deep(.p-6) {
    padding: 21px !important;
    border-top: 1px solid var(--grid);
  }
}
#camerasModal {
  :deep(.max-w-md) {
    width: 1121px !important;
    height: 688px !important;
    max-width: 1121px !important;
  }
  :deep(.bg-white) {
    border: 1px solid var(--grid);
    background-color: var(--theme) !important;
  }
  :deep(.p-6) {
    padding: 0 !important;
    border-top: 1px solid var(--grid);
  }
}
#tbody::-webkit-scrollbar {
  width: 4px;
  height: 116.13px;
}
#tbody::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--grid);
}
#tbody::-webkit-scrollbar-track {
  width: 4px;
  height: 540px;
  background: var(--theme-right);
}
.bd-4b {
  border: 1px solid var(--grid);
}
button {
  box-shadow: none !important;
}
</style>
